<template>
  <div id="app">
    <!-- 至少要加一个父标签 -->
    <div class="container">
      <!-- 头部 -->
      <header>
        <!-- 选择 -->
        <select class="fl">
          <option>成都</option>
          <option>广州</option>
          <option>北京</option>
        </select>
        <!-- 输入框 搜索 -->
        <div class="search fl">
          <!-- <input type="image" src="images/ss.jpg">
          <input type="text" name="search" placeholder="寻找您的爱巢">-->
          <a href="brand.html">
            <img src="images/ss.png" />
            <span>寻找您的爱巢</span>
          </a>
        </div>
        <!-- 扫码 -->
        <img class="fr" src="images/shaoma.jpg" />
        <div class="clear"></div>
      </header>
      <div class="weather"></div>
      <!-- 广告 轮播 -->
      <section class="banner">
        <swiper :options="swiperOption" v-if="adList.length">
          <swiper-slide v-for="(val,key) in adList" :key="key">
            <img :src="val.imgPath" />
          </swiper-slide>

          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <!-- <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide banner-sw"><img src="images/banner1.jpg"></div>
                    <div class="swiper-slide banner-sw"><img src="images/banner1.jpg"></div>
                    <div class="swiper-slide banner-sw"><img src="images/banner1.jpg"></div>
                    <div class="swiper-slide banner-sw"><img src="images/banner1.jpg"></div>
                </div>
             
                <div class="swiper-pagination"></div>
        </div>-->
      </section>
      <nav class="navtop">
        <ul>
          <li>
            <a href="#">
              <img src="images/logo1.jpg" />
              <p>整租</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/logo2.jpg" />
              <p>合租</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/logo3.jpg" />
              <p>资讯</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/logo1.jpg" />
              <p>新房源</p>
            </a>
          </li>
        </ul>
      </nav>
      <section class="content">
        <h1>本期优选</h1>
        <div class="select">
          <div class="left fl">
            <img src="images/1.jpg" />
          </div>
          <div class="right fr">
            <img src="images/2.jpg" />
            <img src="images/3.jpg" />
          </div>
          <div class="clear"></div>
        </div>
        <h1>
          周边推荐
          <a href="#" class="fr">更多></a>
        </h1>
        <!-- <img src="images/4.jpg"> -->
        <!-- <div class="map" id="allmap" style="width: 100%;height: 3.29rem;overflow: hidden;margin:0"></div> -->
        <baidu-map id="allmap" @ready="mapReady" style="width: 100%;height: 3.29rem;overflow: hidden;margin:0">
           <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE">
                </bm-marker>
        </baidu-map>
        <h1>精选好房</h1>
        <ul class="c">
          <li>
            区域
            <span class="icon">&#xe6aa;</span>
          </li>
          <li>
            租金
            <span class="icon">&#xe6aa;</span>
          </li>
          <li>
            户型
            <span class="icon">&#xe6aa;</span>
          </li>
          <li>
            筛选
            <span class="icon">&#xe6aa;</span>
          </li>
        </ul>
        <ul class="case">
          <li v-for="(val) in baseHouse" :key="val.hid">
            <router-link :to="{name:'detail',params:{hid:val.hid,type:'best'}}">
              <a href="javascript:;">
                <img :src="val.cover" class="fl" />
                <div class="text fr">
                  <h1>{{val.name}}</h1>
                  <p>{{val.desc}}</p>
                  <ul>
                    <li
                      v-for="(v,k) in val.tag"
                      :key="k"
                      :class="v.status==='active'?'active':''"
                    >{{v.name}}</li>
                  </ul>
                  <p>
                    {{val.rentMoney}}
                    <span>元/月</span>
                  </p>
                </div>
              </a>
            </router-link>
          </li>

          <!-- <li>
            <a href="homedetails.html">
              <img src="images/5.jpg" class="fl" />
              <div class="text fr">
                <h1>包图软件园二期押一付三</h1>
                <p>套二 50m2 距包图大道地铁站1 .2km</p>
                <ul>
                  <li class="active">在线签约</li>
                  <li>近地铁</li>
                  <li>精装修</li>
                </ul>
                <p>
                  2100
                  <span>元/月</span>
                </p>
              </div>
            </a>
          </li>
          <li>
            <a href="homedetails.html">
              <img src="images/5.jpg" class="fl" />
              <div class="text fr">
                <h1>包图软件园二期押一付三</h1>
                <p>套二 50m2 距包图大道地铁站1 .2km</p>
                <ul>
                  <li class="active">在线签约</li>
                  <li>近地铁</li>
                  <li>精装修</li>
                </ul>
                <p>
                  2100
                  <span>元/月</span>
                </p>
              </div>
            </a>
          </li>-->
        </ul>
        <p
          style="text-align:center; margin-bottom:1.5rem; font-size:0.2rem"
          @click="getMore"
        >{{loadMore}}</p>
      </section>
    </div>
    <!--<router-view /> -->
  </div>
</template>

<script type="text/ecmascript-6">
// import axios from "axios";

// 默认输出组件对象（只输出一次）
export default {
  name: "App",
  data() {
    return {
      //定义变量
      swiperOption: {
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true, //是否自动轮播
        pagination: { el: ".swiper-pagination" }, //轮播图中下标点显示
        paginationClickable: true, //轮播图中下标点显示
      },
      //广告图数据
      adList: [],
      loadMore: "加载更多....",
      pn: 1, //页码
      point: "",
    };
  },
  //加载子组件（页面分离的内容）
  components: {},
  //生命周期
  mounted() {
    let _this = this;
    //组件渲染前执行
    this.$axios({
      //使用全局的this.$axios
      methods: "get",
      url: "/data/ad_data.json",
    })
      .then(function (res) {
        //请求成功
        // console.log(res);
        let data = res.data;
        //给data的变量赋值
        if (data.code == 200) {
          _this.adList = data.index_ad;
        }
      })
      .catch((error) => {
        //错误（网络中断、请求地址有问题）
        console.log(error);
      });

    //获取精选好房 调用store/home.js
    this.$store.dispatch("getHouse", this.pn);

    //获取地图
    // this.getmap();
  },
  created() {},
  updated() {},
  destroyed() {},
  methods: {
    //事件函数（用方法格式）
    getMore() {
      //做分页，加载列表更多数据（去调用中间件的getHouse方法）
      let arr = this.$store.state.index.bestHouse;
      let total = this.$store.state.index.houseTotal;
      if (arr.length >= total) {
        return; // 阻止执行
      }

      this.$store.dispatch("getHouse", ++this.pn);
    },
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13);
      map.centerAndZoom(this.point, 12);
    },

    // getmap() {
    //   var map = new window.BMap.Map("allmap");
    //   var point = new window.BMap.Point(116.331398, 39.897445);
    //   map.centerAndZoom(point, 12);

    //   var geolocation = new window.BMap.Geolocation();
    //   geolocation.getCurrentPosition(
    //     function (r) {
    //       if (this.getStatus() == window.BMAP_STATUS_SUCCESS) {
    //         var mk = new window.BMap.Marker(r.point);
    //         map.addOverlay(mk);
    //         map.panTo(r.point);
    //         // alert('您的位置：'+r.point.lng+','+r.point.lat);
    //       } else {
    //         // alert('failed'+this.getStatus());
    //       }
    //     },
    //     { enableHighAccuracy: true }
    //   );
    // },
  },
  computed: {
    //计算属性（定义变量，跟data不一样，可以对变量的值进行更多的赋值操作）
    baseHouse() {
      //定义baseHouse变量
      // let arr = this.$store.state.index.bestHouse;
      return this.$store.state.index.bestHouse;
    },
  },
  watch: {
    //监听变量的改变（会可以自动更新变量的值）
    baseHouse() {
      let arr = this.$store.state.index.bestHouse;
      let total = this.$store.state.index.houseTotal;
      if (arr.length >= total) {
        this.loadMore = "我是底线";
      }
    },
  },
};
</script>

<style scoped lang="less" rel="stylesheet/less">
// @import url("../assets/css/index.css");
//  @import url("../assets/css/swiper.min.css");
header {
  height: 0.7rem;
  margin: 0.35rem 0.25rem 0;
  font-size: 0.28rem;
}

header select {
  width: 1rem;
  background-color: #fff;
  border: none;
  margin-top: 0.15rem;
  outline: none;
  font-family: inherit;
  font-size: 0.28rem;
}

header select option {
  border: none;
  background-color: #fff;
  outline: none;
}

header .search {
  width: 5rem;
  height: 0.7rem;
  background-color: #f7f7f7;
  position: relative;
  left: 0.1rem;
}

header .search input[type="image"] {
  width: 0.24rem;
  height: 0.24rem;
  position: relative;
  left: 0.33rem;
  top: 0.25rem;
}

header .search input[type="text"] {
  background-color: #f7f7f7;
  border: none;
  font-family: inherit;
  position: relative;
  left: 0.5rem;
  top: 0.2rem;
}

header .search a {
  width: 100%;
  height: 100%;
  display: block;
}

header .search img {
  width: 0.24rem;
  height: 0.24rem;
  position: relative;
  left: 0.33rem;
  top: 0.25rem;
}

header .search span {
  position: relative;
  left: 0.5rem;
  top: 0.2rem;
  color: #9e9e9e;
}

header > img {
  width: 0.38rem;
  height: 0.38rem;
  margin-top: 0.13rem;
}

.banner {
  margin-top: 0.2rem;
}

.navtop ul {
  display: flex;
  justify-content: space-around;
  margin: 0.4rem 0.42rem 0;
}

.navtop ul li {
  /*width: 1rem;*/
  width: 25%;
  height: 1.1rem;
  text-align: center;
}

.navtop ul li a {
  width: 100%;
  height: 100%;
  display: block;
}

.navtop ul li img {
  width: 0.46rem;
  height: 0.46rem;
  display: block;
  margin: 0 auto;
}

.navtop ul li p {
  color: #5e5e5e;
  font-size: 0.28rem;
  margin-top: 0.18rem;
}

.content {
  margin: 0 0.24rem 1.2rem;
}

.content > h1 {
  font-size: 0.48rem;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
}
.content > ul.case > li .text h1 {
  margin: 0 auto;
}
.content > h1 > a {
  font-size: 0.28rem;
  line-height: 0.48rem;
  display: inline-block;
  color: #7d7d7d;
  margin-top: 0.1rem;
  font-weight: normal;
}

.content .select {
  width: 100%;
  max-height: 3.42rem;
}

.content img {
  width: 100%;
  display: block;
}

.content .select .left {
  width: 3.37rem;
}

.content .select .right {
  width: 3.35rem;
}

.content .select .right > img:nth-child(2) {
  margin-top: 0.22rem;
}

/* 天气 */

.weather {
  display: flex;
  width: 6.9rem;
  height: 1.2rem;
  border-radius: 0.6rem;
  background-color: #c6ebff;
  font-size: 0.16rem;
  padding-top: 0.1rem;
  box-sizing: border-box;
  /* color: #fff; */
  margin: 0 auto;
  margin-top: 0.2rem;
}

.temperature {
  font-size: 0.7rem;
  width: 2rem;
  text-align: center;
  margin-right: 0.2rem;
}

.temperature span {
  font-size: 0.6rem;
  position: relative;
  top: 0.05rem;
}

.weather-info {
  flex: 3;
}

.weather-info p {
  line-height: 0.35rem;
}

.weather-img {
  flex: 2;
  text-align: center;
  line-height: 0.6rem;
}

.weather-img img {
  display: block;
  width: 0.7rem;
  height: 0.5rem;
  margin: 0 auto;
}


</style>
